<template>
  <div class="q-pa-sm card-style">
    <div class="q-gutter-y-md ">
      <ScrollArea :bot-margin="100">
        <slot></slot>
      </ScrollArea>

      <footer class="footer">
        <q-card-actions class="justify-evenly q-pa-md">
          <q-btn class="grey-btn" label="Back" type="Back" @click="clickBtn1"/>
        </q-card-actions>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';
import { ref } from 'vue';

const props = defineProps<{
  btn1Callback: () => void;
}>();

async function clickBtn1() {
  props.btn1Callback();
}

</script>
<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>
